<template>
  <div v-bind:style="styleObject" class="scale-box">
    <slot></slot>
  </div>
</template>

<script>
import {debounce} from "lodash";

const that = this;
export default {
  props: {
    width: {
      type: Number,
      default: 1920,
    },
    height: {
      type: Number,
      default: 1080,
    },
  },
  components: {},
  data() {
    return {
      scale: this.getScale(),
    }
  },
  computed: {
    styleObject(){
        return {
          transform: `scale(${this.scale}) translate(-50%, -50%)`,
          WebkitTransform: `scale(${this.scale}) translate(-50%, -50%)`,
          width: this.width + "px",
          height: this.height + "px",
      }
    }

  },
  mounted() {
    this.getScale()
    window.addEventListener("resize", this.setScale)
  },
  methods: {
    getScale() {
      let ww = window.innerWidth / this.width
      let wh = window.innerHeight / this.height
      return ww < wh ? ww : wh
    },

    setScale: debounce(function () {
        this.scale = this.getScale()
    }, 500),
  },
  beforeDestroy() {
    window.addEventListener("resize", this.setScale)
  },
}
</script>

<style scoped lang="less">
.scale-box {
  transform-origin: 0 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transition: 0.3s;
}
</style>
